<template>
  <div>
    <h3>群组内通讯录</h3>
    <!--    {{this.$route.params.group_id}}
        {{group_id}}-->
    <ul class="container">
      <li class="aaaa">
        <span>头像</span>
        <span>用户名</span>
        <span>Id</span>
        <span>地址</span>
        <span v-if="flag">电话号码</span>
        <span>操作</span>
        <span>操作</span>
      </li>
      <li v-for="item in users">
        <span style="font-size: 0">
          <img class="avatar"
               :src="item.avatar"
               alt="">
        </span>
        <span>{{item.user_name}}</span>
        <span>{{item.user_id}}</span>
        <span>{{item.address}}</span>
        <span v-if="flag">{{item.phone}}</span>
        <span>
          <el-button @click="del(item.user_id)">删除</el-button>
        </span>
        <span>
          <el-button @click="showDialog(item)">角色</el-button>
        </span>
      </li>
    </ul>
    <el-dialog
      title="角色设置"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form :inline="true">
        <el-form-item label="角色" style="text-align:left">
          <el-radio v-model="current.role" label="0" :disabled="current.role==='2'">普通</el-radio>
          <el-radio v-model="current.role" label="1" :disabled="current.role==='2'">管理员</el-radio>
          <el-radio v-model="current.role" label="2" :disabled="true">创建者</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeRole" :disabled="confirmFlag||current.role==='2'">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  /* eslint-disable spaced-comment */

  import ElButton from '../../../node_modules/element-ui/packages/button/src/button.vue'
  import { groupReadMember, groupQuit, groupReadInfo, changeRoleApi } from '@/public/api'

  export default {
    components: {ElButton},
    data () {
      return {
        group_id: '',
        users: [],
        dialogVisible: false,
        current: '',
        flag: true,
        confirmFlag: true
      }
    },
    methods: {
      del (id) {
        this.$confirm('你确定要删除吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          groupQuit({
            group_id: this.group_id,
            delete_id: id
          }).then(
            data => {
              if (data.status) {
                this.users = this.users.filter(function (value) {
                  return value.user_id !== id
                })
                console.log(`删除成员成功，删除成员时${id}`)
              }
            }
          )
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      Init () {
        this.group_id = this.$route.params.group_id
        groupReadMember({group_id: this.group_id})
          .then(
            data => {
              if (data.status) {
                this.users.length = 0
                let content = data.data
                for (let i = 0; i < content.length; i++) {
                  this.users.push({
                    user_id: content[i].user_info.user_id,
                    user_name: content[i].user_info.name,
                    phone: content[i].user_info.phone,
                    address: content[i].user_info.detail_address,
                    avatar: content[i].user_info.avatar,
                    role: content[i].role + ''
                  })
                }

                /*console.log('####################', this.users.filter(x => {
                  return x.role !== '0' && x.user_id === this.User_id
                }).length === 0)*/
                this.confirmFlag = this.users.filter(x => {
                  return x.role !== '0' && x.user_id === this.User_id
                }).length === 0
                console.log(5555555555555555, this.confirmFlag)
              }
            }
          )
      },
      setContact () {
        groupReadInfo({
          group_id: this.group_id
        }).then(
          data => {
            this.flag = data.data.province === '2'
          }
        ).catch()
      },
      showDialog (item) {
        this.current = item
        // this.confirmFlag = false
        this.dialogVisible = true
      },
      changeRole () {
        this.dialogVisible = false
        changeRoleApi(
          {
            item_id: this.current.user_id,
            group_id: this.$route.params.group_id,
            role: Number(this.current.role)
          }
        ).then(
          data => {
            console.log(data)
            if (data.status) {
              this.$message.success('操作成功')
              this.Init()
            }
          }
        ).catch()
      }
    },
    watch: {
      group_id () {
        this.Init()
      }
    },
    mounted () {
      this.Init()
      this.setContact()
    },
    computed: {
      User_id () {
        return this.$store.state.user_id
      }
    }
  }
</script>
<style scoped>
  .container {
    list-style: none;
    padding-left: 0;
    margin: 5px 0;
  }

  .container li {
    margin-top: 20px;
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
  }

  .container li:hover {
    border: 1px solid black;
  }

  .container > li > span {
    flex: 1;
  }

  img {
    border-radius: 50%;
    width: 50px;
    height: 50px;
  }

  .container .aaaa:hover {
    border: 1px solid transparent;
  }
</style>
